<!DOCTYPE html>
<html lang="en">

<head>
    <title>xml格式化工具</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/css/highlight.min.css">
    <script src="/js/head.js" type="text/javascript"></script>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            background-color: #f5f5f5;
        }

        * {
            font-family: consolas, PingFang SC, Microsoft YaHei;
        }

        [v-cloak] {
            visibility: hidden !important;
        }

        .el-tabs--border-card {
            box-shadow: none;
        }

        #json {
            margin: 20px;
        }

        .logo {
            font-size: 32px;
            color: #666;
        }

        .no-select * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .el-select .el-input {
            width: 100px;
        }

        .method {
            margin-left: 20px !important;
            border-left: 1px solid #ddd;
        }

        .type {
            cursor: pointer;
        }

        .tips {
            font-size: 12px;
            color: #999;
            padding-left: 80px;
        }

        .contentType {
            margin-right: 10px !important;
        }

        .contentType .el-input {
            width: 90px;
        }

        .el-tabs__header,
        .el-tabs__nav-scroll,
        .el-tabs--border-card {
            border-radius: 5px;
        }

        textarea {
            resize: none !important;
        }

        pre {
            overflow: auto;
        }

        pre > * {
            font-size: 14px;
            margin: 0;
        }

        .header {
            margin-bottom: 10px;
            height: 70px !important;
        }

        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track {
            background-color: rgba(50, 50, 50, 0.1);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        ::-webkit-scrollbar-button {
            background-color: transparent;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        .input-with-select {
            display: block;
        }

        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .dh-ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover, .dropdown:hover .dropbtn {
            background-color: red;
        }

        li.dropdown {
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropdown-content a:hover {background-color: #f1f1f1;}

        .dropdown:hover .dropdown-content {
            display: block;
        }


        .preClass {outline: 1px solid #ccc; padding: 5px; margin: 5px; position: absolute; left: 850px; top: 222px}
        .string { color: green; }
        .number { color: black; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
        .btnClearClass {position: absolute; left: 750px;top: 180px}
        .btnClearAllClass {position: absolute; left: 620px;top: 180px}
        .btnCopyClass {position: absolute; left: 850px;top: 180px}

        *{
            padding: 0;
            margin: 0;
        }
        .yg-toast{
            position: fixed;
            background: blue;
            border-radius: 4px;
            top: 12%;
            left: 50%;
            transform: translate(-50%,-50%);
            max-width: 60%;
            text-align: center;
            transition: all .1s;
        }
        .yg-toast-text{
            color: white;
            padding: 4px 10px;
            padding-bottom: 6px;
        }



    </style>
</head>

<body>
<div id="json" v-cloak>
    <el-container>
        <!--导航栏,引入head.js即可-->
        <br>
        <el-header class="header">
            <a href="/xml/format/">
                <img src="/images/logoXml.jpg" height="80px"/>
            </a><span style="color:red">个人交流学习用，文本框内<span style="color:black;background-color:yellow;font-weight:700">双击鼠标</span>开始格式化</span>
        </el-header>
        <el-main>
            <div class="btnClearClass" style="display:block">
                <el-button name="清空" type="primary" round @click="clearLeftJson">清空</el-button>
            </div>
            <div class="btnClearAllClass" style="display:block">
                <el-button name="全部清空" type="primary" round @click="clearAll">全部清空</el-button>
            </div>
            <div class="btnCopyClass" style="display:block">
                <el-button id="copyBtn" name="复制" type="info" round data-clipboard-target="#fmtXml">复制
                </el-button>
            </div>
            <br><br>
            <div>
                <el-input type="textarea" :rows="30" :cols="15" placeholder="请输入待格式化xml" v-model="composeJson"
                          style="width:800px" @dblclick.native="doubleClick()">
                </el-input>
                <el-input id="fmtXml" type="textarea" :rows="30" :cols="15" placeholder="格式化xml" v-model="response.body"
                          style="width:800px">
                </el-input>
<!--                <pre class="preClass" style="width:785px;height:630px;max-width:785px;max-height:630px;display:block;"-->
<!--                     v-html="response.body"></pre>-->
            </div>
            <br>
        </el-main>
    </el-container>
    <div class="footer">
        <div id="contactM"><label>服务</label>&nbsp;&nbsp;author：xf</div>
    </div>
</div>
</body>

<script src="/js/vkbeautify.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/element.js"></script>
<script src="/js/clipboard.min.js"></script>


<script>
    new Vue({
        el: '#json',
        data() {
            return {
                composeJson:"",
                composeJsonHidden:"",
                response: {
                    body: ""
                },
            }
        },
        created() {

        },
        updated() {

        },
        methods: {
            //鼠标双击
            doubleClick() {
                var that = this;
                if(that.composeJson === '' || that.composeJson == null){
                    that.$message.error('请输入文本内容');
                    that.response.body = "";
                    return;
                }
                this.formatXml(that.composeJson);
            },

            //格式化xml
            formatXml(content){
                var that = this;
                var str = "";
                try {
                    console.log(content);
                    str = vkbeautify.xml(content);
                } catch (error) {
                    console.log(error);
                    that.response.body = error.message;
                } finally {
                    that.response.body = str;
                    that.composeJsonHidden = str;
                    console.log(that.response.body);
                }
            },

            //清空左侧内容
            clearLeftJson(){
                this.composeJson = "";
            },
            //清空所有内容
            clearAll(){
                this.response.body = "";
                this.composeJson = "";
            },

        }
    });

    //创建粘贴板对象
    var btnClipboard = new ClipboardJS('#copyBtn');
    btnClipboard.on('success',function(e){
        new Ygtoast().toast("内容已复制到剪贴板",1000);
        e.clearSelection();
        // btnClipboard.destroy();
    });
    btnClipboard.on('error',function(e){
        console.log(e);
        new Ygtoast().toast("复制失败",1000);
    });

    //立即执行函数
    (function(window , undefined ){
        var Ygtoast = function(){ //构造函数大驼峰命名法
        };
        Ygtoast.prototype={  //prototype 属性使您有能力向对象添加属性和方法。
            create: function(str,duration) {
                let self = this;
                var toastHtml = '';
                var toastText = '<div class="yg-toast-text">'+str+'</div>';
                toastHtml = '<div class="yg-toast">'+toastText+'</div>';
                if(document.querySelector(".yg-toast"))return;    //当还没hide时禁止重复点击
                document.body.insertAdjacentHTML('beforeend', toastHtml);
                duration == null ? duration=2000 : '';  //如果toast没有加上时间，默认2000毫秒；
                self.show();
                setTimeout(function(){
                    self.hide();
                }, duration);
            },
            show:function(){
                let self = this;
                document.querySelector(".yg-toast").style.display = "block";
                document.querySelector(".yg-toast").style.marginTop =  "-"+Math.round(document.querySelector(".yg-toast").offsetHeight/2)+"px";
                if(document.querySelector(".yg-toast"))return;
            },
            hide:function(){
                var self = this;
                if(document.querySelector(".yg-toast")){
                    document.querySelector(".yg-toast").parentNode.removeChild(document.querySelector(".yg-toast"));
                }
            },
            toast:function(str,duration){
                var self = this;
                return self.create(str,duration);
            }
        };
        window.Ygtoast = Ygtoast;

    }(window));

    // 以上是造轮子

</script>
</html>